// 为了刷新vuex的数据还存在，要使用数据持久化，自己选择localStorage sessionStorage cookie
import { getToken, setToken, removeToken } from '@/utils/auth'
import { loginRequest } from '@/api/user'
import { constantRoutes, resetRouter } from '@/router'

export default {
  namespaced: true, // 必须添加这个属性，命名空间，外界才能使用模块去访问
  state: {
    token: getToken() || '',
    userInfo: {},
    // 路由初始的时候，值是静态路由数组，从路由文件里面导入进来
    routes: constantRoutes
  },
  mutations: {
    loginMutation(state, payload) {
      // 下面这句话是将token保存到vuex里面，也可以说是保存到内存里面，但是一刷新就没了
      state.token = payload
      // 还需要做一个数据持久化
      setToken(payload)
    },
    setUserInfoMutation(state, payload) {
      state.userInfo = payload
    },
    // 通过检查代码，发现我们这个mutation就是退出登录的时候调用的，
    delTokenMutation(state) {
      state.token = ''
      state.userInfo = {}
      // 还需要将本地储存也清空
      // setToken('')
      removeToken()
      // 在退出页面的时候，还需要清空动态路由
      resetRouter()
    },
    setRoutes(state, payload) {
      state.routes = [...constantRoutes, ...payload]
    }
  },
  actions: {
    // actions里面不能修改token，只能在mutations里面修改，但是因为actions里面可以放异步代码
    // 所以我们才在actiosn里面写代码，通过actions里面context 提交commit一个muations
    async loginAction(context, payload) {
      // const res = await loginRequest(payload)
      // context.commit('loginMutation', res.data)
      // const { a: a } = { a: 1, b: 2, c: 3, d: 4 }  使用对象解构在进一步简化代码
      const { data } = await loginRequest(payload)
      context.commit('loginMutation', data)
      // router.push('/')
      return Promise.resolve(true)
    }
  }
}
